@import './src/scss/variables';

$sidebar-height: 100vh;
$sidebar-bg: darken($white, 5%) !default;
$sidebar-nav-width: 100%;
$sidebar-nav-link-size: 14px;
$sidebar-nav-link-padding-x: 15px;
$sidebar-nav-link-padding-y: 15px;
$sidebar-nav-link-color: lighten($black, 5%);
$sidebar-nav-link-hover-color: $sidebar-nav-link-color;
$sidebar-nav-icon-color: lighten($black, 40%);
$sidebar-nav-icon-hover-color: $sidebar-nav-link-color;
$sidebar-nav-icon-active-color: theme-color('primary');
$sidebar-nav-link-active-color: theme-color('primary');
$sidebar-nav-link-active-bg-color: darken($sidebar-bg, 15%);
$sidebar-nav-link-bg-hover-color: darken($sidebar-nav-link-active-bg-color, 5%);
$sidebar-nav-title-padding-x: 1rem;
$sidebar-nav-title-padding-y: 0.8rem;
$sidebar-nav-title-color: lighten($black, 50%);

$sidebar-minimizer-height: 50px !default;
$sidebar-minimizer-bg: lighten(theme-color('primary'), 5%);
$sidebar-minimizer-borders: (
  top: (size: 2px, style: solid, color: theme-color('primary'))
);
$sidebar-minimizer-indicator-color: $gray-800;
$sidebar-minimizer-indicator: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 14'%3E%3Cpath fill='#{$sidebar-minimizer-indicator-color}' d='M9.148 2.352l-4.148 4.148 4.148 4.148q0.148 0.148 0.148 0.352t-0.148 0.352l-1.297 1.297q-0.148 0.148-0.352 0.148t-0.352-0.148l-5.797-5.797q-0.148-0.148-0.148-0.352t0.148-0.352l5.797-5.797q0.148-0.148 0.352-0.148t0.352 0.148l1.297 1.297q0.148 0.148 0.148 0.352t-0.148 0.352z'/%3E%3C/svg%3E"), '#', '%23') !default;
$sidebar-minimizer-hover-bg: darken($sidebar-minimizer-bg, 5%);
$sidebar-minimizer-hover-indicator-color: $gray-900;
$sidebar-minimizer-hover-indicator: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 14'%3E%3Cpath fill='#{$sidebar-minimizer-hover-indicator-color}' d='M9.148 2.352l-4.148 4.148 4.148 4.148q0.148 0.148 0.148 0.352t-0.148 0.352l-1.297 1.297q-0.148 0.148-0.352 0.148t-0.352-0.148l-5.797-5.797q-0.148-0.148-0.148-0.352t0.148-0.352l5.797-5.797q0.148-0.148 0.352-0.148t0.352 0.148l1.297 1.297q0.148 0.148 0.148 0.352t-0.148 0.352z'/%3E%3C/svg%3E"), '#', '%23') !default;
$sidebar-borders: (
  right: (size: 1px, style: solid, color: $border-color)
) !default;

$list-group-item-padding: 12px 16px;

#sidebar {

  display: flex;
  flex-direction: column;
  background: $sidebar-bg;
  width: $sidebar-width;
  height: $sidebar-height;
  flex-shrink: 0;
  transition: all 0.3s;
  overflow: hidden;
  z-index: 1;
  @include borders($sidebar-borders);

  .sidebar-nav {
    flex: 1;
    position: relative;
    width: $sidebar-nav-width;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none;
    background: inherit;
    border: none;
    margin-top: $navbar-height;

    .nav {
      width: $sidebar-nav-width;
      list-style: none;
      background: inherit;

      .nav-item {
        width: $sidebar-nav-width;
        position: relative;
      }

      .nav-link {
        display: block;
        text-decoration: none;
        padding: $sidebar-nav-link-padding-y $sidebar-nav-link-padding-x;
        color: $sidebar-nav-link-color;
        font-size: $sidebar-nav-link-size;

        i:first-of-type, svg:first-of-type {
          display: inline-block;
          width: 24px;
          margin-right: 4px;
          color: $sidebar-nav-icon-color;
          font-size: 14px;
        }

        &:hover {
          background: $sidebar-nav-link-bg-hover-color;
          color: $sidebar-nav-link-hover-color;

          i, svg {
            color: $sidebar-nav-icon-hover-color;
          }
        }

        &.active {
          color: $sidebar-nav-link-active-color;
          background: $sidebar-nav-link-active-bg-color;

          &:hover {
            background: $sidebar-nav-link-bg-hover-color;
          }

          i {
            color: $sidebar-nav-icon-active-color;
          }
        }
      }

      .nav-title {
        font-size: $small-font-size;
        text-transform: uppercase;
        padding: $sidebar-nav-title-padding-y $sidebar-nav-title-padding-x;
        color: darken($sidebar-nav-title-color, 30%);
      }

    }

    @import "sidebar/node";

  }

  input.form-control {
    margin-left: 10px;
    margin-bottom: 1em;
    width: auto;
  }
  @import "sidebar/tree";

}
